<template>
  <div>
    <h1>首页</h1>
    <div id="main"></div>
  </div>
</template>



<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive } from "vue";
import service from "../../../utils/service";

let day = reactive<string[]>([])
let val = reactive<string[]>([])

const getdata = () =>{
  service({
    url:"/data/kData",
    method:"get"
  }).then((res:any)=>{
    if(res.data.code === "200"){
      console.log("res.data.data",res.data.data);
      day = res.data.data.x

      val = res.data.data.val
    }
  }).then(()=>{
      initCharts()
  })
}
getdata()


const initCharts = () =>{
      var myChart = echarts.init(document.getElementById("main") as HTMLElement)

      //绘制图表
      myChart.setOption({
        title: {
            text: 'Stacked Line'
        },

        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['男装', '女装', '童装', '鞋袜']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: day,
            boundaryGap: false,
        },
        yAxis: {
            type: 'value'
        },
        series: [

            {
                name: '男装',
                type: 'line',
                // stack: 'Total',
                data: val[0],

            },
            {
                name: '女装',
                type: 'line',
                // stack: 'Total',
                data: val[1],
            },
            {
                name: '童装',
                type: 'line',
                // stack: 'Total',
                data: val[2],
            },
            {
                name: '鞋袜',
                type: 'line',
                // stack: 'Total',
                data: val[3],
            },

        ]
    });
}

</script>

<style scoped>
#main {
    width: 100%;
    height: 600px;
}
</style>